<template>
  <div class="inviteh">
    <vheader pageTitle="邀请好友"></vheader>
    <ul class="inviteh-tab">
      <li :class="{active: currentTab === 'all'}"  @click="tab('all')">全部</li>
      <li :class="{active: currentTab === 'hasInvest'}" @click="tab('hasInvest')">已出借</li>
      <li :class="{active: currentTab === 'noInvest'}" @click="tab('noInvest')">未出借</li>
    </ul>
    <div class="inviteh-top" id="js_top">
      <span>已邀好友 · 时间</span>
      <span>奖励总额(元)</span>
      <span>详情</span>
    </div>

    <div class="inviteh-list" v-scroll="onScroll" v-if="currentTab === 'all'">
      <ul v-infinite-scroll="loadMore(allOptions)" infinite-scroll-disabled="allOptions.loading" infinite-scroll-distance="5">
        <li class="border-1px" v-for="item in allOptions.dataList">
          <span>{{ item.emRealNmae }} {{ item.emLoginName }} &nbsp {{ item.createTime }}</span>
          <span :style="{color: item.amount === 0 ? '#999' : '#3fadf9'}">{{ (item.amount && item.amount.toFixed(2)) || '0.00' }}</span>
          <span 
            :style="{color: '#3fadf9'}"
            @click="remind(item)">{{ item.amount === 0 ? '提醒他首投' : '提醒他复投' }}</span>
        </li>
      </ul>
  
      <list-loading
        :allLoaded="allOptions.allLoaded" v-show="!allOptions.noData"></list-loading>
        <no-data v-show="allOptions.noData"></no-data>
    </div>

    <div class="inviteh-list" v-scroll="onScroll" v-if="currentTab === 'hasInvest'">
      <ul v-infinite-scroll="loadMore(hasInvestOptions)" infinite-scroll-disabled="hasInvestOptions.loading" infinite-scroll-distance="5">
        <li class="border-1px" v-for="item in hasInvestOptions.dataList">
          <span>{{ item.emRealNmae }} {{ item.emLoginName }} &nbsp {{ item.createTime }}</span>
          <span :style="{color: item.amount === 0 ? '#999' : '#3fadf9'}">{{ (item.amount && item.amount.toFixed(2)) || '0.00' }}</span>
          <span 
            :style="{color: '#3fadf9'}"
            @click="remind(item)">{{ item.amount === 0 ? '提醒他首投' : '提醒他复投' }}</span>
        </li>
      </ul>
      
      <list-loading
        :allLoaded="hasInvestOptions.allLoaded" v-show="!hasInvestOptions.noData"></list-loading>
        <no-data v-show="hasInvestOptions.noData"></no-data>
    </div>

    <div class="inviteh-list" v-scroll="onScroll" v-if="currentTab === 'noInvest'">
      <ul v-infinite-scroll="loadMore(noInvestOptions)" infinite-scroll-disabled="noInvestOptions.loading" infinite-scroll-distance="5">
        <li class="border-1px" v-for="item in noInvestOptions.dataList">
          <span>{{ item.emRealNmae }} {{ item.emLoginName }} &nbsp {{ item.createTime }}</span>
          <span :style="{color: item.amount === 0 ? '#999' : '#3fadf9'}">{{ (item.amount && item.amount.toFixed(2)) || '0.00' }}</span>
          <span 
            :style="{color: '#3fadf9'}"
            @click="remind(item)">{{ item.amount === 0 ? '提醒他首投' : '提醒他复投' }}</span>
        </li>
      </ul>
      
      <list-loading
        :allLoaded="noInvestOptions.allLoaded" v-show="!noInvestOptions.noData"></list-loading>
        <no-data v-show="noInvestOptions.noData"></no-data>
    </div>
    
  </div>
</template>

<script>
  import vheader from 'components/common/comHead'
  import listLoading from 'components/common/listLoading'
  import noData from 'components/common/noData'
  import { Toast } from 'mint-ui'

  export default {
    data () {
      return {
        currentTab: 'all', // hasInvest or noInvest
        allOptions: {
          loading: false,
          pageOffset: 1,
          totalPage: 1,
          allLoaded: false,
          dataList: [],
          pageSize: 10,
          noData: false,
          inviteStatus: -1
        },
        hasInvestOptions: {
          loading: false,
          pageOffset: 1,
          totalPage: 1,
          allLoaded: false,
          dataList: [],
          pageSize: 10,
          noData: false,
          inviteStatus: 1
        },
        noInvestOptions: {
          loading: false,
          pageOffset: 1,
          totalPage: 1,
          allLoaded: false,
          dataList: [],
          pageSize: 10,
          noData: false,
          inviteStatus: 0
        }
      }
    },
    methods: {
      // 每个展示列表传入不同的options来获取不同的列表
      loadMore (currentOptions) {
        if (currentOptions.allLoaded) {
          return
        }
        currentOptions.loading = true
        const acctKey = this.$cookie.get('acctKey')
        this.$http.get(`/api/member/memberInviteAward/inviteAwarListData?acctKey=${acctKey}&currentPage=${currentOptions.pageOffset}&numPerPage=${currentOptions.pageSize}&inviteStatus=${currentOptions.inviteStatus}`)
          .then((res) => {
            if (res.data.success) {
              res.data.data.list.forEach((item) => {
                currentOptions.dataList.push(item)
              })
              console.log(res.data.data)
              currentOptions.loading = false
              currentOptions.totalPage = res.data.data.totalPage
              console.log(currentOptions.pageOffset, currentOptions.totalPage)
              if (currentOptions.pageOffset === currentOptions.totalPage || currentOptions.totalPage === 0) {
                currentOptions.allLoaded = true
                return
              }
              currentOptions.pageOffset++
            } else {
              // 没有数据
              currentOptions.allLoaded = true
              currentOptions.noData = true
            }
          })
      },
      onScroll (e, position) {
        const topEle = document.getElementById('js_top')
        if (position.scrollTop === 0) {
          topEle.classList.remove('active')
        }
        if (position.scrollTop > 0) {
          topEle.classList.add('active')
        }
      },
      remind (item) {
        // orderType 为 投资次数
        const acctKey = this.$cookie.get('acctKey')
        const inviteMobile = item.emLoginName
        const sendType = item.amount === 0 ? 'S001' : 'X001'

        this.$http.post('/api/member/smsInvitMessage', `acctKey=${acctKey}&inviteMobile=${inviteMobile}&sendType=${sendType}&needSend=1`)
          .then((res) => {
            if (res.data.success) {
              Toast({
                message: `提醒${sendType === 'S001' ? '首投' : '复投'}成功`
              })
            } else {
              Toast(res.data.msg)
            }
          })
          .catch((err) => {
            console.log(err)
          })
      },
      tab (target) {
        this.currentTab = target
      }
    },
    mounted () {
      // 初次加载，映射视图数据
      this.tab('all')
    },
    components: {
      vheader,
      listLoading,
      noData
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';
  .inviteh {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    &-tab {
      display: flex;
      flex: none;
      align-items: center;
      color: $base-999;
      width: 100%;
      height: 88px;
      font-size: 32px;
      box-shadow: 0 2px 1px 1px $base-e5e5e5;
      z-index: $zIndex-1--tabBarTop;
      li {
        text-align: center;
        flex: 1;
        border-right: 1px solid #ddd;
        &:nth-last-child(1) {
          border-right: none;
        }
        &.active {
          color: $base-ff6c00;
        }
      }
    }
    &-top {
      flex: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 108px;
      padding: 0 30px;
      background: $base-fff;
      &.active {
        box-shadow: 0 2px 3px 1px #e3e3e3;
      }
      span {
        font-size: 30px;
        text-align: right;
        color: $base-999;
      }
      &>span:nth-child(1) {
        text-align: left;
        width: 42%;
      }
      &>span:nth-child(2) {
        width: 30%;
      }
      &>span:nth-child(3) {
        width: 22%;
      }
    }
    &-list {
      overflow: auto;
      -webkit-overflow-scrolling : touch;
      ul {
        li {
          height: 108px;
          margin: 0 30px;
          @include border-1px(#{$base-e5e5e5});
          font-size: 28px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: $base-666;
          text-align: right;
          &>span:nth-child(1) {
            text-align: left;
            width: 44%;
            line-height: 40px;
          }
          &>span:nth-child(2) {
            width: 30%;
            padding-right: 20px;
          }
          &>span:nth-child(3) {
            width: 22%;
          }
        }
      }   
    }
  }
</style>
